<template>
	<view class="wrap">
		<!-- 编辑状态 -->
		<view class="box-detail">
			<view class="box-detail-content">
				<uni-forms ref="form" :rules="rules" :value="formData">

					<uni-forms-item name="NAME" required label="展会名称">
						<uni-easyinput type="text" v-model="formData.NAME" placeholder="请输入展会名称">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="INDUSTRY" label="行业类别">
						<picker @change="bindPickerChange" :range="dicData.inve_field" range-key="CODE_NAME"
							:value="index" data-key="inve_field" class="picker">
							<uni-easyinput type="text" :inputBorder="true" v-model="formData.INDUSTRY"
								placeholder="请选择行业类别" suffixIcon="arrowright" :styles="inputStyle" disabled>
							</uni-easyinput>
							<view class="picker-text">
								{{selectData.inve_field.value}}
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item name="START_DATE" label="日期">
						<uni-datetime-picker type="date" :value="formData.START_DATE" start="2015-2-31" end="2025-2-30" @change="dateChange" v-model="formData.START_DATE"></uni-datetime-picker>
					</uni-forms-item>
					<uni-forms-item name="PLACE" label="地点">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.PLACE"
							placeholder="请输入地点"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="ORGANIZERS" label="主办单位">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.ORGANIZERS"
							placeholder="请输入主办单位"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="LINK_TEL" label="联系方式">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.LINK_TEL"
							placeholder="请输入联系方式"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="EMAIL" label="邮箱">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.EMAIL" placeholder="请输入邮箱">
						</uni-easyinput>
					</uni-forms-item>
					
					<uni-forms-item name="REMARK" label="参展简介">
						<uni-easyinput type="textarea" autoHeight :inputBorder="true" v-model="formData.REMARK"
							placeholder="请输入企业简介"></uni-easyinput>
					</uni-forms-item>
				
					<uni-forms-item name="MANAGER" required label="跟进人" @tap="toPersonList">
						<view class="picker">
						<uni-easyinput type="text" autoHeight :inputBorder="true" v-model="formData.MANAGER"
							placeholder="请选择跟进人" suffixIcon="arrowright" :styles="inputStyle" disabled></uni-easyinput>
							<view class="picker-text">
								{{personText}}
							</view>	
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="bar-contact">
				联系人
			</view>
			<view class="box-detail-content-os" v-for="item,index in contactData" :key="index">
				<view class="box-detail-content-item-os">
					<view class="row-title">联系人</view>
					<input class="uni-input form-input" v-model="item.CONTACT" name="input" placeholder="请填写联系人"/>
				</view>
				<view class="box-detail-content-item-os">
					<view class="row-title">联系方式</view>
					<input class="uni-input form-input" v-model="item.CONTACT_NUMBER" name="input" placeholder="请填写联系方式"/>
				</view>
				<view class="box-detail-content-item-os">
					<view class="row-title">职务</view>
					<input class="uni-input form-input" v-model="item.POST" name="input" placeholder="请填写职务"/>
				</view>
			</view>
			<image src="../../../static/images/add.png" class="btn-add" @click="addContact"></image>
			<view class="box-attach">
				<view class="box-attach-row" @tap="uplaodFile('zhcl')">
					<image src="../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon">
					</image>
					<text class="box-attach-name">展会材料上传</text>
				</view>
				<view class="box-attach-row" v-for="item,index in FILELISTtwo" :key='index'>
					<image src="../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon">
					</image>
					<text class="box-attach-name" >{{item.fileShowName}}</text>
				</view>
			</view>
			<view class="box-attach">
				<view class="box-attach-row" @tap="uplaodFile('zhcg')">
					<image src="../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon">
					</image>
					<text class="box-attach-name">展会成果上传</text>
				</view>
				<view class="box-attach-row" v-for="item,index in FILELISTone" :key='index'>
					<image src="../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon">
					</image>
					<text class="box-attach-name" >{{item.fileShowName}}</text>
				</view>
			</view>
			<mix-fixed-bar @leftEvent="handleSave('form')" @rightEvent="handleBack" barType="2" leftText="保存"
				rightText="返回">
			</mix-fixed-bar>
		</view>
	</view>

</template>

<script>
	import mixFixedBar from '../../../components/mix-fixe-bar.vue';
	export default {
		components: {
			mixFixedBar
		},
		data() {
			return {
				isEdit: false,
				formData: {
					NAME: '',
					COMPANY_SIZE: '',
					INDUSTRY: '',
					NATURE: '',
					WEBSITE: '',
					ZC_ADDRESS: '',
					HEAD_ADDRESS: '',
					TX_ADDRESS: '',
					EMAIL: '',
					BUSINESS_SCOPE: '',
					COMPANY_PROFILE: '',
					PROJ_DEMAND: '',
					PROJ_ANALYSIS: '',
					MANAGER: '',
					START_DATE:'',
					PLACE:'',
					ORGANIZERS:'',
					LINK_TEL:'',
					REMARK:''
				},
				FILELISTone:[],
				FILELISTtwo:[],
				newFileList:[],
				personText:'',
				inputStyle: {
					disableColor: '#ffffff',
					borderColor: '#ffffff'
				},
				dicData: {

				},
				rules: {
					NAME: {
						rules: [{
							required: true,
							errorMessage: '企业名称不能为空'
						}]
					}
				},
				selectData: {
					ent_scale: {
						index: 0,
						value: '',
						name: 'COMPANY_SIZE'
					},
					inve_field: {
						index: 0,
						value: '',
						name: 'INDUSTRY'
					},
					dwxz: {
						index: 0,
						value: '',
						name: 'NATURE'
					}
				},
				index: 0,
				dataKey: '',
				contactData:[]
			}
		},
		methods: {
			async getDetail() {
				console.log('save')
				if (this.dataKey) {
					uni.showLoading({
						
					})
					const ret = await this.$req({
						url: `bus/projmanage/filter.do`,
						data: {
							moduleId: 'busProjManage'
						}
					})
					let personData = []
					if (ret.data.success) {
						console.log('in success')
						personData = ret.data.attributes.zdyDataSource.personDataSourceManage ?
							ret.data.attributes.zdyDataSource.personDataSourceManage : [];
					}
					const res = await this.$req({
						url: `info/busExhibition/view.do?dataKey=${this.dataKey}`,
						data: {},
					})
					uni.hideLoading()
					if(res.data.success){
						if(res.data.attributes.fileList['PPP_T_BUS_EXHIBITION_INFO.zhcg']&&res.data.attributes.fileList['PPP_T_BUS_EXHIBITION_INFO.zhcg'].fileList){
							this.FILELISTone=res.data.attributes.fileList['PPP_T_BUS_EXHIBITION_INFO.zhcg'].fileList
						}
						if(res.data.attributes.fileList['PPP_T_BUS_EXHIBITION_INFO.zhcl']&&res.data.attributes.fileList['PPP_T_BUS_EXHIBITION_INFO.zhcl'].fileList){
							this.FILELISTtwo=res.data.attributes.fileList['PPP_T_BUS_EXHIBITION_INFO.zhcl'].fileList
						}
						
						const form = {...this.formData}
						const pageData = {...this.formData,...res.data.attributes.model}
						//联系人
						this.contactData = res.data.attributes.dataGrid.telephone_view.datas
						this.contactData.map(item=>{
							item.IDS=item.IDS
							item.DATAKEY=item.DATAKEY
							item.CONTACT=item.CONTACT
							item.CONTACT_NUMBER=item.CONTACT_NUMBER
							item.POST=item.POST
							item.EDITTYPE=0
						})
						//跟进入
						this.personText = this.$util.queryPersonName(pageData.MANAGER, personData)
						this.formData = pageData;
						//picker的回显
						const pickerData = {...this.selectData};
						
						const  dicData = JSON.parse(uni.getStorageSync('dicData')) 
						//公司规模
						pickerData.ent_scale.value = this.$util.queryDicName(dicData,'ent_scale',pageData.COMPANY_SIZE);
						//行业类别
						pickerData.inve_field.value = this.$util.queryDicName(dicData,'inve_field',pageData.INDUSTRY);
						//企业性质
						pickerData.dwxz.value = this.$util.queryDicName(dicData,'dwxz',pageData.NATURE);
						this.selectData  = pickerData;
					}
				}
			},
			handleSave(form) {
				const self = this;
				let projSubjectListData={}
				this.$refs[form]
					.submit()
					.then(async (res) => {
						console.log('表单的值：', res)
						if(this.contactData.length){
							let projSubjectStr=''
							res['telephone_edit.totalNum']=this.contactData.length
							for(var i=0;i<this.contactData.length;i++){
								projSubjectStr+=`telephone_edit.EDITTYPE-${i}:`+this.contactData[i].EDITTYPE+';'+`telephone_edit.IDS-${i}:`+this.contactData[i].IDS+';'
								+`telephone_edit.DATAKEY-${i}:`+this.contactData[i].DATAKEY+';'+`telephone_edit.CONTACT-${i}:`+this.contactData[i].CONTACT+';'
								+`telephone_edit.CONTACT_NUMBER-${i}:`+this.contactData[i].CONTACT_NUMBER+';'+`telephone_edit.POST-${i}:`+this.contactData[i].POST+';'
							}
							projSubjectListData=this.changeStr(projSubjectStr)
							console.log(projSubjectListData,"projSubjectListDataprojSubjectListData")
						}
						if(this.dataKey){
							res.DATAKEY = this.dataKey;
							res.isadding = false;
						}else {
							res.isadding = true
						}
						if(this.newFileList.length){
							res.newAttachId=this.newFileList[0].dataKey
						}
						uni.showLoading({
							
						})
						const ret = await this.$req({
							url: 'wxinfo/busExhibition/save.do',
							data: {...res,...projSubjectListData}
						})
						uni.hideLoading()
						if (ret.data.success) {
							uni.showToast({
								title: '操作成功',
								icon: "success"
							})
							//刷新详情和列表
							uni.$emit("refreshDetail",{});
							uni.$emit("refreshList",{})
							uni.navigateBack({
								
							})
						} else {
							uni.showToast({
								title: ret.data.messages[0].content
							})
						}
					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},
			dateChange(e){
				
			},
			handleBack() {
				uni.navigateBack({

				})
			},
			toCompanyList() {
				uni.navigateTo({
					url: '../../selectList/company'
				})
			},
			toPersonList() {
				uni.navigateTo({
					url: '../../selectList/person'
				})
			},
			bindPickerChange(e) {
				console.log('e', e)
				const key = e.currentTarget.dataset.key;
				const value = e.detail.value;
				const data = {
					...this.selectData
				};
				data[key].index = value;
				data[key].value = this.dicData[key][value].CODE_NAME;
				const formData = {
					...this.formData
				}
				console.log('this.selectData[key].name', this.selectData[key].name)
				formData[this.selectData[key].name] = this.dicData[key][value].CODE;
				this.formData = formData;
				this.selectData = data;
			},
			addContact(){
				const iniData = {
					IDS: this.dataKey,
					DATAKEY:this.getUUID(),
					CONTACT:'',
					CONTACT_NUMBER:'',
					POST:'',
					EDITTYPE:1,
				}
				this.contactData.push(iniData)
			},
			getUUID() {
			   var s = [];
			   var hexDigits = "0123456789abcdef";
			   for (var i = 0; i < 36; i++) {
			    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
			   }
			   s[14] = "4"; 
			   s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); 
			   s[8] = s[13] = s[18] = s[23] = "";
			
			   var uuid = s.join("");
			   return uuid;
			},
			changeStr(str){
				let ArryObj={}
				if(str){
					const arryOne=str.split(";")
					arryOne.map(item=>{
						if(item.split(":")[0]){
							ArryObj[item.split(":")[0]]=item.split(":")[1]
						}
						
					})
					for(var i in ArryObj){
						if(ArryObj[i]==="null"){
							ArryObj[i]=null
						}
					}
					return ArryObj
				}
				
			},
			uplaodFile(text){
				if(text==='zhcl'){
					this.$util.upload('_zhcl','PPP_T_BUS_EXHIBITION_INFO.zhcl',(data)=>{
						if(data){
							this.newFileList=data
							this.FILELISTtwo.push({
								...data[0],fileShowName:data[0].name
							})
						}
						
					})
				}else{
					this.$util.upload('_zhcg','PPP_T_BUS_EXHIBITION_INFO.zhcg',(data)=>{
						if(data){
							this.newFileList=data
							this.FILELISTone.push({
								...data[0],fileShowName:data[0].name
							})
						}
						
					})
				}
				
			}
		},
		onLoad(options) {
			this.dataKey = options.dataKey;
			const dic = JSON.parse(uni.getStorageSync('dicData'))
			const data = {
				...this.dicData
			}
			data.ent_scale = JSON.parse(dic.ent_scale); //企业规模
			data.inve_field = JSON.parse(dic.inve_field); //行业类型
			data.dwxz = JSON.parse(dic.dwxz) //企业性质
			this.dicData = data;
			this.getDetail();
		},
		onShow() {
			const self = this
			uni.$on("companyName", res => {
				console.log(res);
				// 清除监听
				self.formData.NAME = res.data
				uni.$off('companyName');
			})
			uni.$on("person", res => {
				console.log(res);
				// 清除监听
				this.personText = res.data.map(item=>{
					return item.text
				})
				const form = {...this.formData};
				form.MANAGER = res.data.map(item=>{
					return item.value
				}).join(',')
				this.formData = form;
				uni.$off('person');
			})
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding-bottom: 60rpx;
	}


	.btn-add {
		width: 160rpx;
		height: 46rpx;
		margin: 20px auto 0 auto;
	}
	.box-detail {
		background-color: #ffffff;
		border-radius: 20px;
		margin: 20rpx;
		padding: 26rpx 30rpx 50rpx 30rpx;
	}

	.picker {
		position: relative;
	}

	.picker-text {
		position: absolute;
		left: 10px;
		right: 30px;
		height: 36px;
		top: 0;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #333;
		background: #fff;
		z-index: 9;
		padding: 10 0 0 10px;
	}
	.box-detail-content-os{
		margin-top: 24rpx;
		padding: 0 10rpx;
		border-bottom: 8rpx solid #e8f0f2;
		position: relative;
	}
	.uni-input{
		font-size: 26rpx;
		color: #808080;
		// border-bottom:1px solid #dce4e6;
		flex:1;
	}
	.box-detail-content-item-os {
		display: flex;
		flex-direction: row;
		// align-items: center;
		// justify-content: flex-start;
		// justify-content: space-between;
		margin-bottom: 20rpx;
	
		.row-title {
			width: 170rpx;
			font-size: 26rpx;
			color: #414a5d;
			text-align: left;
			flex-shrink: 0;
			margin-right: 10rpx;
	
			&.mag {
				margin-left: 18rpx;
			}
		}
	
		.row-content {
			font-size: 26rpx;
			color: #414a5d;
			word-wrap: break-word;
			word-break: break-all;
			flex: 1;
			text-align: left;
	
			&.mag {
				margin-right: 18rpx;
			}
		}
	}
	.box-detail-content {
		margin-top: 24rpx;

		&.border {
			border-bottom: 1px solid #e8f0f2;
		}
	}

	.box-detail-content-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.row-title {
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			width: 120rpx;
			margin-right: 10rpx;

			&.mag {
				margin-left: 18rpx;
			}
		}

		.row-content {
			font-size: 26rpx;
			color: #414a5d;
			word-wrap: break-word;
			word-break: break-all;
			flex: 1;
			text-align: right;

			&.mag {
				margin-right: 18rpx;
			}
		}
	}

	.bar-contact {
		background-color: #0099cc;
		border-radius: 10px;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 18rpx;
		color: #FFFFFF;
		font-size: 24rpx;

	}

	.box-attach {
		margin-top: 20rpx;
	}

	.box-attach-row {
		display: flex;
		align-items: center;
		padding: 0 18rpx;
		height: 38rpx;
		margin-bottom: 10rpx;

		.box-attach-icon {
			width: 34rpx;
			margin-right: 30rpx;
		}

		.box-attach-name {
			word-wrap: break-word;
			word-break: break-all;
			white-space: pre-line;
			font-size: 26rpx;
			color: #0099cc;
		}
	}

	.uni-form-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.uni-input {
		border-bottom: 1px solid #dce4e6;
		flex: 1;
	}

	.title {
		width: 200rpx;
		flex-shrink: 0;
	}
</style>
